<!DOCTYPE html>
<html>
<head>
    <title>Events</title>
    <meta charset="utf-8">
    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    
        <div id="example" class="k-content">
            <div id="taxi">
                <label for="states">Select a state in USA:</label>
                <input id="states"/>
            </div>
            <div class="demo-section">                
                <h3 class="title">Console log
                </h3>
                <div class="console"></div>
            </div>
            <script>
                $(document).ready(function() {
                    function onOpen() {
                        if ("kendoConsole" in window) {
                            kendoConsole.log("event :: open");
                        }
                    }

                    function onClose() {
                        if ("kendoConsole" in window) {
                            kendoConsole.log("event :: close");
                        }
                    }

                    function onChange() {
                        if ("kendoConsole" in window) {
                            kendoConsole.log("event :: change");
                        }
                    }

                    function onSelect(e) {
                        if ("kendoConsole" in window) {
                            var dataItem = this.dataItem(e.item.index());
                            kendoConsole.log("event :: select (" + dataItem + ")" );
                        }
                    }

                    function onDataBound(e) {
                        if ("kendoConsole" in window) {
                            kendoConsole.log("event :: dataBound");
                        }
                    }

                    var data = [
                            "Alabama",
                            "Alaska",
                            "American Samoa",
                            "Arizona",
                            "Arkansas",
                            "California",
                            "Colorado",
                            "Connecticut",
                            "Delaware",
                            "District of Columbia",
                            "Florida",
                            "Georgia",
                            "Guam",
                            "Hawaii",
                            "Idaho",
                            "Illinois",
                            "Indiana",
                            "Iowa",
                            "Kansas",
                            "Kentucky",
                            "Louisiana",
                            "Maine",
                            "Maryland",
                            "Massachusetts",
                            "Michigan",
                            "Minnesota",
                            "Mississippi",
                            "Missouri",
                            "Montana",
                            "Nebraska",
                            "Nevada",
                            "New Hampshire",
                            "New Jersey",
                            "New Mexico",
                            "New York",
                            "North Carolina",
                            "North Dakota",
                            "Northern Marianas Islands",
                            "Ohio",
                            "Oklahoma",
                            "Oregon",
                            "Pennsylvania",
                            "Puerto Rico",
                            "Rhode Island",
                            "South Carolina",
                            "South Dakota",
                            "Tennessee",
                            "Texas",
                            "Utah",
                            "Vermont",
                            "Virginia",
                            "Virgin Islands",
                            "Washington",
                            "West Virginia",
                            "Wisconsin",
                            "Wyoming"
                        ];

                    $("#states").kendoAutoComplete({
                        dataSource: data,
                        select: onSelect,
                        change: onChange,
                        close: onClose,
                        open: onOpen,
                        dataBound: onDataBound
                    });
                });
            </script>

            <style scoped>
                #taxi {
                    width: 240px;
                    height: 160px;
                    padding: 80px 0 0 200px;
                    background: url('../../content/web/autocomplete/taxi.png') transparent no-repeat 0 0;
                    margin: 20px auto;
 		}
                #taxi label {
                    display: block;
                    color: #333;
                    padding-bottom: 5px;
 		}
                .k-autocomplete {
                    display: block;
                    clear: left;
                    width: 200px;
                    vertical-align: middle;
                }
                .demo-section {
                    width: 500px;
                    text-align: center;
                }
                .console {
                    margin: 0;
                }
            </style>
        </div>

	
			
</body>
</html>
